<?php
/**
 * 英雄区组件
 */
$configKey = isset($configKey) ? $configKey : 'hero';
$data = array_merge([
    'section_id' => $configKey,
    'section_title' => '欢迎来到我们的网站',
    'section_subtitle' => '发现更多精彩内容，从这里开始',
    'alignment' => 'left', // left, center, right
    'buttons' => [
        [
            'text' => '了解更多',
            'url' => '#',
            'style' => 'primary', // primary, secondary, outline
            'icon' => '' // 可选FontAwesome图标类名
        ]
    ],
    'background' => [
        'type' => 'gradient', // gradient, image, solid
        'value' => 'from-blue-600 to-indigo-700', // 对应类型的值
        'overlay' => 0 // 0-100的透明度百分比，仅用于image类型
    ],
    'text_color' => 'white', // white, dark
    'height' => 'md', // sm, md, lg, xl, full
    'image' => [
        'src' => '',
        'position' => 'right', // left, right, bottom
        'width' => '1/2' // 响应式宽度比例
    ]
], $pageConfig['components'][$configKey] ?? []);

// 处理背景样式
$bgStyles = '';
if(isset($data['background']['type'])){
    switch($data['background']['type']) {
        case 'gradient':
            $bgStyles = "bg-gradient-to-br {$data['background']['value']}";
            break;
        case 'image':
            $overlay = $data['background']['overlay'] ?? 0;
            $overlayClass = $overlay > 0 ? "after:bg-black after:opacity-{$overlay} after:absolute after:inset-0" : '';
            $bgStyles = "bg-cover bg-center relative after:content-[''] {$overlayClass}";
            $bgStyles .= " bg-[url('{$data['background']['value']}')]";
            break;
        case 'solid':
            $bgStyles = "bg-{$data['background']['value']}";
            break;
    }
}

// 处理高度样式
$heightClasses = [
    'sm' => 'py-12',
    'md' => 'py-16',
    'lg' => 'py-20',
    'xl' => 'py-24',
    'full' => 'min-h-screen flex items-center py-12'
];
$heightClass = $heightClasses[$data['height']] ?? $heightClasses['md'];

// 处理文本颜色
$textColorClass = $data['text_color'] === 'white' ? 'text-white' : 'text-gray-900';
$textMutedClass = $data['text_color'] === 'white' ? 'text-white/90' : 'text-gray-700';

// 处理对齐方式
$alignmentClass = [
    'left' => 'text-left',
    'center' => 'text-center mx-auto',
    'right' => 'text-right ml-auto'
][$data['alignment']] ?? 'text-left';
function buttonClass($style) {
    global $data;
    // 按钮样式处理
    $btnClasses = 'px-6 py-3 rounded-lg font-medium transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5';
    
    switch($style ?? 'primary') {
        case 'primary':
            $btnClasses .= $data['text_color'] === 'white' 
                ? ' bg-white text-gray-900 hover:bg-gray-100' 
                : ' bg-primary text-white hover:bg-primary/90';
            break;
        case 'secondary':
            $btnClasses .= $data['text_color'] === 'white' 
                ? ' bg-white/20 text-white hover:bg-white/30' 
                : ' bg-gray-200 text-gray-900 hover:bg-gray-300';
            break;
        case 'outline':
            $btnClasses .= $data['text_color'] === 'white' 
                ? ' border-2 border-white bg-transparent hover:bg-white/10' 
                : ' border-2 border-gray-900 bg-transparent hover:bg-gray-100';
            break;
    }
    return $btnClasses;
}
?>

<!-- 英雄区 -->
<section class="relative <?php echo $bgStyles; ?> <?php echo $textColorClass; ?> <?php echo $heightClass; ?> overflow-hidden">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="flex flex-col lg:flex-row items-center gap-10">
            <!-- 文本内容区 -->
            <div class="max-w-3xl <?php echo $alignmentClass; ?>">
                <?php if (!empty($data['section_pretitle'])): ?>
                <p class="inline-block px-3 py-1 rounded-full text-sm font-medium mb-4 <?php echo $data['text_color'] === 'white' ? 'bg-white/20' : 'bg-gray-100'; ?>">
                    <?php echo $data['section_pretitle']; ?>
                </p>
                <?php endif; ?>
                
                <h1 class="text-[clamp(2rem,5vw,4rem)] font-bold leading-tight mb-6 tracking-tight">
                    <?php echo $data['section_title']; ?>
                </h1>
                
                <?php if (!empty($data['section_subtitle'])): ?>
                <p class="text-[clamp(1rem,2vw,1.25rem)] <?php echo $textMutedClass; ?> mb-8 max-w-2xl leading-relaxed">
                    <?php echo $data['section_subtitle']; ?>
                </p>
                <?php endif; ?>
                
                <?php if (!empty($data['buttons']) && is_array($data['buttons'])): ?>
                <div class="flex flex-wrap gap-4 justify-<?php echo $data['alignment']; ?>">
                    <?php foreach ($data['buttons'] as $button): ?>
                        <a href="<?php echo htmlspecialchars($button['url'] ?? '#'); ?>" class="<?php echo buttonClass($button['style']); ?>">
                            <?php if (!empty($button['icon'])): ?>
                                <i class="fa <?php echo $button['icon']; ?> mr-2"></i>
                            <?php endif; ?>
                            <?php echo $button['text']; ?>
                        </a>
                    <?php endforeach; ?>
                </div>
                <?php endif; ?>
            </div>
            
            <!-- 右侧图片（如果配置） -->
            <?php if (!empty($data['image']['src']) && $data['image']['position'] !== 'bottom'): ?>
            <div class="<?php echo $data['image']['width']; ?> lg:<?php echo $data['image']['position']; ?>">
                <img 
                    src="<?php echo htmlspecialchars($data['image']['src']); ?>" 
                    alt="<?php echo htmlspecialchars($data['title']); ?>" 
                    class="rounded-lg shadow-2xl w-full object-cover h-auto max-h-[500px] transform transition-transform duration-700 hover:scale-105"
                >
            </div>
            <?php endif; ?>
        </div>
        
        <!-- 底部图片（如果配置） -->
        <?php if (!empty($data['image']['src']) && $data['image']['position'] === 'bottom'): ?>
        <div class="mt-12">
            <img 
                src="<?php echo htmlspecialchars($data['image']['src']); ?>" 
                alt="<?php echo htmlspecialchars($data['title']); ?>" 
                class="rounded-lg shadow-xl w-full object-cover h-auto max-h-[400px]"
            >
        </div>
        <?php endif; ?>
    </div>
    
    <!-- 底部波浪装饰（可选） -->
    <?php if (!empty($data['show_wave']) && $data['show_wave']): ?>
    <div class="absolute bottom-0 left-0 right-0">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" class="w-full h-auto">
            <path fill="<?php echo $data['text_color'] === 'white' ? '#ffffff' : '#f8fafc'; ?>" fill-opacity="1" d="M0,64L60,69.3C120,75,240,85,360,80C480,75,600,53,720,48C840,43,960,53,1080,58.7C1200,64,1320,64,1380,64L1440,64L1440,100L1380,100C1320,100,1200,100,1080,100C960,100,840,100,720,100C600,100,480,100,360,100C240,100,120,100,60,100L0,100Z"></path>
        </svg>
    </div>
    <?php endif; ?>
</section>
    